<template>
	<div class="wrapper">
		<div class="box">
			<div class="block block-1">
				<image class="img" src="@/pages/cart/static/pay.png" />
				<p class="ptips">收银台</p>

				<p class="ptips">
					支付金额
					<span>¥{{ price }}</span>
				</p>
			</div>
		</div>
		<div class="__pay_form__">
		</div>
		<div class="block-4">
			<div class="payItem">支付方式</div>
			<div class="payItem">
				<u-row class="row" @click="pay('alipay')">
					<div class="col1" size="100" style="text-align:left;">
						<div>
							<u-icon class="method_icon" name="zhifubao-circle-fill" color="#008ffa" size="80"></u-icon>
							<span class="method_name">支付宝</span>
						</div>
					</div>
					<div class="col3" textAlign="right">
						<u-icon size="26" color="#b1b1b1" name="arrow-right"></u-icon>
					</div>
				</u-row>

				<u-row class="row" @click="pay('wxpay')">
					<div class="col1" size="100" style="text-align:left;">
						<div>
							<u-icon class="method_icon" name="weixin-circle-fill" color="#00c98b" size="80"></u-icon>
							<span class="method_name">微信</span>
						</div>
					</div>
					<div class="col3" textAlign="right">
						<u-icon size="26" color="#b1b1b1" name="arrow-right"></u-icon>
					</div>
				</u-row>
			</div>
		</div>
	</div>
</template>

<script>

import { orderPay, orderPaywx } from "@/api/order.js"
export default {
	data() {
		return {
			id: "",
			price: "",
			product: ''
		}
	},


	async onLoad(options) {

		this.id = options.id;
		this.price = options.price;
		this.from = options.from
	},

	mounted() {

	},
	methods: {
		pay(paymethod) {
			let that = this
			if (paymethod == 'alipay') {
				orderPay({ id: this.id }).then(res => {
					uni.requestPayment({
						provider: paymethod,
						orderInfo: res.data.data || '',
						success: (e) => {
							uni.showToast({
								icon: "none",
								title: "支付成功!",
							});


							var timer = setInterval(() => {
								if (that.from == 'product') {
									uni.navigateBack({
										delta: 2
									});
								} else {
									uni.navigateBack({
										delta: 1
									});
								}
								clearInterval(timer)
							}, 2000)
						},
						fail: (e) => {
							uni.showModal({
								content: "支付失败,如果您已支付，请勿反复支付",
								showCancel: false,
							});
						},
					});
				})
			}

			if (paymethod == 'wxpay') {
				orderPaywx({ id: this.id }).then(res => {
					uni.requestPayment({
						provider: paymethod,
						orderInfo: res.data.data || '',
						success: (e) => {
							uni.showToast({
								icon: "none",
								title: "支付成功!",
							});


							var timer = setInterval(() => {
								if (that.from == 'product') {
									uni.navigateBack({
										delta: 2
									});
								} else {
									uni.navigateBack({
										delta: 1
									});
								}
								clearInterval(timer)
							}, 2000)
						},
						fail: (e) => {
							uni.showModal({
								content: "支付失败,如果您已支付，请勿反复支付",
								showCancel: false,
							});
						},
					});
				})
			}
		},

	}
}
</script>

<style>
.method_icon {
	vertical-align: middle;
}

.method_name {
	font-size: 28rpx;
	color: #999;
	padding-left: 24rpx;
}

.row {
	display: flex;
	width: 100%;
}

/deep/ .u-row {
	width: 100% !important;
	display: flex;
	justify-content: space-between !important;
}

.method_name,
.col1 {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.col1 {
	text-align: center;
	flex: 99;
}

.col3 {
	text-align: right;
	flex: 1;
}

.payItem {
	padding: 13px 25rpx;
	border-top: 1px solid #f9f9f9;

	line-height: 100rpx;
	font-size: 36rpx;
	color: #333;
}

.ptips {
	font-size: 32rpx;
	margin: 20rpx 0;
	color: #333;

	>span {
		font-size: 40rpx;
		color: #df5a52;
		margin-left: 10rpx;
	}
}

.img {
	width: 392rpx !important;
	height: 296rpx !important;
}

.wrapper {
	min-height: 100vh;
	height: auto;
	background: #f9f9f9;
}

.block-4 {
	background: #fff;
	color: $u-tips-color;

	>p {
		padding: 8rpx;
	}
}

.box {
	background: #fff;
	padding: 40rpx 0;

}

.block {
	text-align: center;
	display: block;
	width: 100%;

	image {
		width: 200rpx;
		height: 200rpx;
	}
}

.block-1 {
	margin-top: 80rpx;
}

.btns {
	margin: 0 20rpx;
}
</style>
